---
breakpoint: tablet
title: Palette
path: /palette/
---

# Palette

Bumbag provides an accessible default palette to get you up and running, hopefully you like it. If not, feel free to customize it.

### Defaults

<Box marginBottom="major-7">
  <Columns>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="default" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="text400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="text300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="text200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="text100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="text" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="textTint" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primary400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primary300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primary200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primary100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primary" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primaryTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primaryShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primary600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primary700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primary800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="primary900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondary400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondary300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondary200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondary100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondary" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondaryTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondaryShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondary600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondary700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondary800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="secondary900" /></Column>
  </Columns>
</Box>

### Grayscales

<Box marginBottom="major-7">
  <Columns>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="black" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="black400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="black300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="black200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="black100" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="white" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="white600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="white700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="white800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="white900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="gray400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="gray300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="gray200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="gray100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="gray" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="gray600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="gray700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="gray800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="gray900" /></Column>
  </Columns>
</Box>

### Statuses

<Box marginBottom="major-7">
  <Columns>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="info400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="info300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="info200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="info100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="info" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="infoTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="infoShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="info600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="info700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="info800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="info900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="success400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="success300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="success200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="success100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="success" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="successTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="successShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="success600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="success700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="success800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="success900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="danger400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="danger300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="danger200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="danger100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="danger" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="dangerTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="dangerShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="danger600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="danger700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="danger800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="danger900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warning400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warning300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warning200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warning100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warning" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warningTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warningShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warning600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warning700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warning800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="warning900" /></Column>
  </Columns>
</Box>

### Colors

<Box marginBottom="major-7">
  <Columns>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blue400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blue300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blue200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blue100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blue" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blueTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blueShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blue600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blue700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blue800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="blue900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="green400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="green300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="green200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="green100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="green" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="greenTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="greenShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="green600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="green700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="green800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="green900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="red400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="red300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="red200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="red100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="red" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="redTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="redShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="red600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="red700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="red800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="red900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orange400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orange300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orange200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orange100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orange" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orangeTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orangeShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orange600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orange700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orange800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="orange900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pink400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pink300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pink200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pink100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pink" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pinkTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pinkShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pink600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pink700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pink800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="pink900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purple400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purple300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purple200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purple100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purple" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purpleTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purpleShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purple600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purple700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purple800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="purple900" /></Column>
  </Columns>
  <Columns marginTop="major-4">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigo400" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigo300" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigo200" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigo100" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigo" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigoTint" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigoShade" /></Column>
  </Columns>
  <Columns marginTop="major-1">
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigo600" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigo700" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigo800" /></Column>
    <Column spread={3} spreadMobile={6}><PaletteColor palette="indigo900" /></Column>
  </Columns>
</Box>

## Accessing the palette

### Within themeable components

#### `applyTheme`

You can access any palette value in any of the color based CSS attributes (such as `backgroundColor` or `color`):

```jsx
import { Button, applyTheme } from 'bumbag';

const PrimaryButton = applyTheme(Button, {
  styles: {
    base: {
      color: 'primary'
    }
  }
})

<PrimaryButton>I am a primary button</PrimaryButton>
```

#### `styled`

```jsx
import { Button, styled, palette } from 'bumbag';

const PrimaryButton = styled(Button)`
  color: ${palette('primary')}
`;

<PrimaryButton>I am a primary button</PrimaryButton>
```

### Within style props

Any CSS color attribute (e.g. `color`, `borderColor`, etc) can take a color from the palette:

```jsx
import { Text } from 'bumbag';

<Text color="primary">I am a primary text</Text>
```

## Modifying the palette

You can modify the palette by [altering the Bumbag theme](/theming).

You can use tools such as [Coolors](https://coolors.co/) or [Smart Swatch](https://smart-swatch.netlify.app/) to generate a decent accessible palette.

#### Example

```jsx
import { Provider } from 'bumbag';

const theme = {
  palette: {
    text: '#212121',
    primary: '#574feb',
    info: '#1e67d5',
    success: '#0a7d33',
    danger: '#da1717',
    warning: '#ed9c22'
  }
}

<Provider theme={theme}>Hello world!</Provider>
```

## Theming

### Schema

```
const theme = {
  palette: {
    background: string,

    black: string,
    white: string,
    white600: string,
    white700: string,
    white800: string,
    white900: string,

    gray100: string,
    gray200: string,
    gray300: string,
    gray400: string,
    gray: string,
    gray500: string,
    gray600: string,
    gray700: string,
    gray800: string,
    gray900: string,

    default: string,
    defaultInverted: string,

    primaryTint: string,
    primaryTintInverted: string,
    primary100: string,
    primary200: string,
    primary300: string,
    primary400: string,
    primary: string,
    primaryInverted: string,
    primary500: string,
    primary600: string,
    primary700: string,
    primary800: string,
    primary900: string,

    secondaryTint: string,
    secondaryTintInverted: string,
    secondary100: string,
    secondary200: string,
    secondary300: string,
    secondary400: string,
    secondary: string,
    secondaryInverted: string,
    secondary500: string,
    secondary600: string,
    secondary700: string,
    secondary800: string,
    secondary900: string,

    infoTint: string,
    infoTintInverted: string,
    info100: string,
    info200: string,
    info300: string,
    info400: string,
    info: string,
    infoInverted: string,
    info500: string,
    info600: string,
    info700: string,
    info800: string,
    info900: string,

    successTint: string,
    successTintInverted: string,
    success100: string,
    success200: string,
    success300: string,
    success400: string,
    success: string,
    successInverted: string,
    success500: string,
    success600: string,
    success700: string,
    success800: string,
    success900: string,

    dangerTint: string,
    dangerTintInverted: string,
    danger100: string,
    danger200: string,
    danger300: string,
    danger400: string,
    danger: string,
    dangerInverted: string,
    danger500: string,
    danger600: string,
    danger700: string,
    danger800: string,
    danger900: string,

    warningTint: string,
    warningTintInverted: string,
    warning100: string,
    warning200: string,
    warning300: string,
    warning400: string,
    warning: string,
    warningInverted: string,
    warning500: string,
    warning600: string,
    warning700: string,
    warning800: string,
    warning900: string,

    // Plus your own definitions...
    [key: string]: string,
    // e.g. fullySickBlue: '#145abc'
  }
}
```

### Example

```jsx
import { Provider } from 'bumbag';

const theme = {
  palette: {
    text: '#212121',
    primary: '#574feb',
    info: '#1e67d5',
    success: '#0a7d33',
    danger: '#da1717',
    warning: '#ed9c22'
  }
}

<Provider theme={theme}>Hello world!</Provider>
```
